<!DOCTYPE html>
<html>
	<head>
		<title>Home</title>
		<!--bootstarp-css-->
		<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<!--/bootstarp-css -->
		<!--css-->
		<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
		<link href="../css/hover.css" rel="stylesheet" media="all">
		<!--/css-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Petcare Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/modernizr.custom.js"></script>
		<script src="../js/responsiveslides.min.js"></script>
		<script>
			// You can also use "$(window).load(function() {"
			$(function() {
				$("#slider2").responsiveSlides({
					auto: true,
					pager: true,
					speed: 300,
					namespace: "callbacks",
				});
				$(".actionChangeType").click(function() {
					$(this).siblings().css("border", "1px solid #0c8687");
					$(this).siblings().css("color", "#0c8687");
					$(this).siblings().css("background", "#fff");
					$(this).css("background", "#0c8687");
					$(this).css("border", "1px solid #0c8687");
					$(this).css("color", "#Fff");
				})
				$(".actionChangeSize").click(function() {
					$(this).siblings().css("border", "1px solid #0c8687");
					$(this).siblings().css("color", "#0c8687");
					$(this).siblings().css("background", "#fff");
					$(this).css("background", "#0c8687");
					$(this).css("border", "1px solid #0c8687");
					$(this).css("color", "#Fff");
				})
				$(".actionChangeGender").click(function() {
					$(this).siblings().css("border", "1px solid #0c8687");
					$(this).siblings().css("color", "#0c8687");
					$(this).siblings().css("background", "#fff");
					$(this).css("background", "#0c8687");
					$(this).css("border", "1px solid #0c8687");
					$(this).css("color", "#Fff");
				})
			});
		</script>
		<style>
			#yincan {
				width: 160px;
				height: 110px;
				position: absolute;
				top: 70px;
				right: 46px;
				background-color: #fff;
				display: none;
			}

			.white-bg {
				width: 970px;
				margin: 30px auto 0;
				background: #fff;
				padding: 20px;
			}

			.text-center {
				text-align: center;
			}

			.avatar-box img {
				border: 3px solid #c3cddb;
				margin-bottom: 8px;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				vertical-align: middle;
			}

			.qq-uploader {
				position: relative;
				width: 100%;
			}

			.avatar-box p {
				margin-bottom: 12px;
			}

			.qq-upload-drop-area,
			.qq-upload-extra-drop-area {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				min-height: 30px;
				z-index: 2;
				background: #FF9797;
				text-align: center;
			}

			.qq-upload-button {
				display: block;
				width: 105px;
				padding: 7px 0;
				text-align: center;
				background: none repeat scroll 0 0 #0c8687 !important;
				border-bottom: 1px solid #DDD;
				color: #FFF;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
				direction: ltr;
			}

			.qq-drop-processing {
				display: none;
			}

			.form-wrapper .field-box {
				margin-left: 0;
				float: left;
				width: 100%;
				border-bottom: 1px dashed #eee;
				padding: 10px 0;
				font-size: 14px;
			}

			.btn-flat {
				display: inline-block;
				margin: 0;
				line-height: 15px;
				vertical-align: middle;
				font-size: 12px;
				text-shadow: none;
				color: #0c8687;
				border-radius: 0;
				background: #fff;
				border: 1px solid #0c8687;
				cursor: pointer;
				padding: 7px 14px;
				-webkit-transition: all .1s linear;
				-moz-transition: all .1s linear;
				transition: all .1s linear;
			}

			.btn-flat:hover {
				color: #fff;
				background-color: #0c8687;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<!--header-->
		<div class="header">
			<!-- <ul class="login">
		<li><a href="login.html">登录</a></li>
		<li><a>|</a></li>
		<li><a href="login.html">注册</a></li>
		<li><a>|</a></li>
		<li><a href="login.html">注销</a></li>
	</ul> -->
			<div class="header-info">
				<div class="container">
					<div class="logo">
						<a href="index.html"><img src="../images/logo-pet.png" style="position: absolute;width: 330px;height: 262px;top: -60px;left: 280px;"/></a>
					</div>
					<div class="search-box">
						<form>
							<input type="text" name="s" class="textbox" placeholder="Search" required="">
							<input type="submit" value="">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="header-bottom">
				<div class="menu">
					<span class="menu-info"> </span>
					<ul class="cl-effect-21">
						<li id="oneser"><a id="service" href="index.html" class="active">服务中心</a>
							<div id="yican">
								<div>
									<p><a href="adopt.html">宠物领养</a></p>
									<p><a href="farmed.html">宠物寄养</a></p>
									<p><a href="notice.html">寻宠|招领</a></p>
								</div>
							</div>
						</li>
						<li><a href="petbaike.html">宠物百科</a></li>
						<li><a href="news.html">宠物新闻</a></li>
						<li><a href="bbs.html">宠物论坛</a></li>
						<li><a href="404.html">关于我们</a></li>
						<li id="twoser">
							<a href="contact.html" id="myme">个人中心</a>
							<div id="yincan">
								<div>
									<p><a href="myinfo.html">我的</a></p>
									<p><a id="overpet">注销</a></p>
								</div>
							</div>
						</li>
					</ul>
				</div>

				<!--yican -->
				<script>
					$("#service").mouseenter(function() {
						$("#yican").css("display", "block");
					});
					$("#oneser").mouseleave(function() {
						$("#yican").css("display", "none");
					});
					$("#myme").mouseenter(function() {
						$("#yincan").css("display", "block");
					});
					$("#twoser").mouseleave(function() {
						$("#yincan").css("display", "none");
					});
					//注销
					$("#overpet").click(function() {
						if (!confirm('是否确定注销该用户并退出登录？'))
							return;
						$.post('http://localhost:80/ct/remove', function(res) {
							if (res) {
								location.href = 'login.html';
							}
						});
					})
				</script>
				<!-- /yican -->
				<!--script-nav -->
				<script>
					$("span.menu-info").click(function() {
						$("ul.cl-effect-21").slideToggle("slow", function() {});
					});
				</script>
				<!-- /script-nav -->
				<div class="clearfix"> </div>
			</div>
		</div>

		<div class="form-page white-container white-bg">
			<div class="form-wrapper clearfix">
				<!-- left column -->
				<div class="column">
					<div class="tab-content" style="padding: 20px 0">
						<form name="savePet">
							<div class="field-box avatar-box">
								<div class="personal-image text-center">
									<img src="https://www.bagong.cn/jic/i/pet-avatar.png" id="pet_avatar" width="100"
										height="100" class="avatar img-circle" alt="avatar">
									<input name="pet_avatar" type="hidden" value="">
									<p id="loading" style="font-size: 14px;">宠物头像</p>
									<div id="thumbnail-fine-uploader">
										<div class="qq-uploader">
											<div class="qq-upload-drop-area" style="display: none;">
												<span>Drop files here to upload</span>
											</div>
											<div class="qq-upload-button"
												style="position: relative; overflow: hidden; direction: ltr;">
												<div style="font-size: 14px;">上传头像</div>
												<input multiple="multiple" type="file" name="qqfile"
													style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
											</div>
											<span class="qq-drop-processing"><span>Processing dropped files...</span>
												<span class="qq-drop-processing-spinner"></span>
												<ul class="qq-upload-list"></ul>
										</div>
									</div>

								</div>
							</div>
							<div class="field-box">
								<label class="col-md-2  col-xs-12">宠物名:</label>
								<div class="col-md-10 col-xs-12">
									<input style="width: 200px" class="form-control" name="pet_name" value=""
										type="text" maxlength="10" placeholder="不得超过10个汉字">
								</div>
							</div>


							<div class="field-box">
								<label class="col-md-2 col-xs-12">宠物类型:</label>
								<div class="col-md-10 col-xs-12">
									<input name="pet_type" id="pet_type" type="hidden" value="">
									<a class="btn-flat actionChangeType " data-value="dog">狗</a>
									<a class="btn-flat actionChangeType " data-value="cat">猫</a>
								</div>
							</div>
							<div class="field-box">
								<label class="col-md-2 col-xs-12">宠物生日:</label>
								<div class="col-md-10 col-xs-12">
									<input type="text" name="pet_born" style="max-width: 300px;" id="autocomplete"
										class="form-control" placeholder="格式：yyyy_MM-dd" value="">
								</div>
							</div>
							<div class="field-box">
								<label class="col-md-2 col-xs-12">宠物性别:</label>
								<div class="col-md-10 col-xs-12">
									<input type="hidden" name="pet_gender" value="1">
									<a class="btn-flat actionChangeGender success" data-value="1">公</a>
									<a class="btn-flat actionChangeGender " data-value="0">母</a>
								</div>
							</div>

							<div class="field-box">
								<label class="col-md-2 col-xs-12">宠物品种:</label>
								<div class="col-md-10 col-xs-12">
									<select name="pet-breed" class="form-control" style="width: 40%;">
										<option value="0">请选择</option>
										<option value="1">123</option>
										<option value="2">123</option>
										<option value="3">123</option>
										<option value="4">123</option>
										<option value="5">123</option>
									</select>
								</div>
							</div>

							<div class="field-box" style="border-top: 1px solid #f1f2f4; padding-top: 20px;">
								<label class="col-md-2 col-xs-12">住址:</label>
								<div class="col-md-10 col-xs-12">
									<input class="form-control inline-input" name="address" value="" type="text"
										placeholder="家庭住址" style="width: 40%;">
								</div>
							</div>
							<input type="hidden" name="loc" value="" id="mappoint">

							<div class="field-box">
								<label class="col-md-2 col-xs-12">提醒邮箱:</label>
								<div class="col-md-10 col-xs-12">
									<input class="form-control inline-input" name="remind_email"
										placeholder="xxxxxx@qq.com" value="" type="text" style="width: 40%;">
								</div>
							</div>
							<div class="clearfix"></div>

							<div class="field-box">
								<label class="col-md-2 col-xs-12">&nbsp;</label>
								<div class="col-md-10 col-xs-12">
									<input type="hidden" name="successUri" value="https://www.bagong.cn/user/mypet/">
									<button type="submit" class="btn btn-danger btn-lg "
										style="outline: none;width: 150px;"> 保 存 </button>
								</div>
							</div>

							<!-- Modal -->
							<div class="modal fade" id="bdmapbox" tabindex="-1" role="dialog"
								aria-labelledby="messagetitle" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">×</button>
											<h4 class="modal-title" id="myModalLabel">标注地址</h4>
										</div>
										<div class="modal-body">

											<div class="field-box" style="margin: 10px 0;">
												<div class="row">
													<div class="col-sm-5">
														<input id="searchzone-keywords"
															class="form-control inline-input" value=""
															placeholder="输入详细地址辅助定位">
													</div>
													<div class="col-sm-5">
														<a id="searchzone-button" class="btn btn-default"
															href="javascript:void(0)">定位</a>
													</div>
												</div>
											</div>

											<div id="baidu_map" style="width: 100%; height: 300px; margin: 10px 0;">
											</div>
											<input type="hidden" name="location" id="location" value="">
											<input type="hidden" name="province" id="province" value="">
											<input type="hidden" name="city" id="city" value="">
											<input type="hidden" name="district" id="district" value="">
										</div>
										<div class="modal-footer no-margin">
											<button type="button" class="btn btn-success"
												data-dismiss="modal">保存标注</button>
										</div>
									</div><!-- /.modal-content -->
								</div><!-- /.modal-dialog -->
							</div><!-- /.modal -->

						</form>
					</div>
				</div>
			</div>
		</div>

		<!--/header-->

		<!--footer-->
		<div class="footer">
			<div class="container">
				<div class="copy-rights">
					<p>Copyright &copy; 2023.Company <a target="_blank" href="index.html">you宠</a></p>
				</div>

			</div>
		</div>
		<!--/footer-->
	</body>
</html>